<template>
  <div>
    <div class="match-performance-items">
      <div class="performanceClass">积分榜</div>
    </div>
    <div class="box-card">
      <el-container>
        <el-header height="57px" class="pass-header">
          <div class="season-selector">
            <el-select class="choose-season"
                       v-model="season"
                       @focus="setMinWidthEmpty"
                       style = 'width:150px'
                       placeholder="请选择赛季">
              <el-option
                      v-for="item in options"
                      :key="item.season"
                      :label="item.label"
                      :value="item.season">
              </el-option>
            </el-select>
          </div>
        </el-header>
        <el-main class="pass-main">
          <ScoreTable :season="season"/>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import mixin from "../../../mixin/mixin";
  import ScoreTable from "./ScoreTable";
  export default {
    name: "Scoreboard",
    mixins:[mixin],
    components:{
      ScoreTable
    },
    watch:{
    },
    data(){
      return {
        //联赛Id，中超是6
        leagueId:6,
        //积分榜数据
        scoreboard:[],
        //赛季下拉选择框的配置项
        options:[
          {
            season: '2019赛季',
            label:  '2019赛季'
          },
          {
            season: '2018赛季',
            label:  '2018赛季'
          },
          {
            season: '2017赛季',
            label:  '2017赛季'
          },
          {
            season: '2016赛季',
            label:  '2016赛季'
          },
        ],
        season:'2019赛季'
      }
    },
    methods:{
      //设置单个单元格的样式
      tableHeaderColor({row,column,rowIndex,columnIndex}){
       if(rowIndex === 0 && (columnIndex === 3 ||columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7 || columnIndex === 8)){
         return {'background-color':'#F1F6F9','padding-left': '21px',"padding-top":'20px'}
       }
       return {'background-color':'#F1F6F9'}
      },
      
      //设置表格行的样式
      tableRowStyle({row,rowIndex}){
        return {'background-color':'#F1F6F9'}
      },

      //设置指定单元格的ClassName,返回的class不能写在当前组件，要写在全局
      //全局css样式在assets/css/reset.css里面
      tableColumnClassName({row,column,rowIndex,columnIndex}){
        if(columnIndex === 1){
          return 'myColumn'
        }
        return ''
      },

      //点击球队名称进入球队详细界面
      enterMatch(teamId){
        console.log(teamId)
      },

    },
    created() {

    }
  }
</script>

<style scoped lang="scss">
  .match-performance-items {
    display: flex;
    justify-content: flex-start;
    width:  1440px;
    height: 56px;
    margin: 40px  auto  0;
    /*background-color: red;*/
  }
  .performanceClass {
    color: #16C79A;
    line-height: 56px;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 5px;
    text-align: center;
    width: 132px;
    height: 100%;
    background-color: #194568;
    border-radius: 10px 10px 0 0;
    margin-right: 3px;
  }
  .box-card {
    margin: auto;
    width:  1440px;
    height: 553px;
  }
  .pass-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #194568;
    padding: 0;
    div {
      margin-right: 10px;
    }
  }
  .pass-main {
    height: 830px;
    padding: 0;
    background-color: #F1F6F9;
  }
</style>